<template>
  <el-table
    v-if="refreshTable"
    :data="tableData"
    :border="hasBorder"
    v-loading="loading"
    :row-key="getRowKeys"
    :default-expand-all="expandAll"
    style="width: 100%"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    :span-method="arraySpanMethod"
    @select="selectRow"
    @select-all="handleSelectAll"
    @sort-change="changeTableSort"
  >
    <!--      全选-->
    <el-table-column
      v-if="hasSelectAll"
      type="selection"
      :reserve-selection="hasReserve"
    />
    <!-- 序号 -->
    <el-table-column
      v-if="hasIndex"
      :label="indexLabel"
      type="index"
      width="60"
    />
    <!--      数据动态生成-->
    <el-table-column
      v-for="(col,index1) in rowHeader"
      :key="index1"
      :prop="col.prop"
      :label="col.label"
      :width="col.width"
      :align="col.align"
      :sortable="col.sortable"
      show-overflow-tooltip
    >
      <template #default="scope">
        <ex-slot
          v-if="col.render"
          :render="col.render"
          :row="scope.row"
          :index="scope.$index"
          :column="col"
        />
        <template v-else>
          <span>{{ (scope.row[col.prop] === '' || scope.row[col.prop] === undefined || scope.row[col.prop] === null) ? '/' : scope.row[col.prop] }}</span>
        </template>
      </template>
    </el-table-column>
    <!--      操作按钮-->
    <el-table-column
      v-if="hasOption"
      :label="addBtnList.label"
      :width="addBtnList.width"
      :align="addBtnList.align"
    >
      <template #default="scope">
        <span>
          <el-button
            v-for="(item,index1) in addBtnList.list"
            :key="index1"
            :type="item.type || 'primary'"
            :text="item.text"
            v-has="item.directName"
            @click="clkCall(item.methods,scope)"
          >{{ item.title }}</el-button>
        </span>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-if="hasPagination"
    ref="pagination"
    class="combination tablePagination"
    :current-page="pageNum"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    :layout="pageLayout"
    :total="putTotal"
    @size-change="handleSizeChange"
    @current-change="handleNumChange"
  />
</template>

<script lang="ts" setup>
import exSlot from '@/components/table/exSlot'
const $emit = defineEmits(['operaBtnClick', 'selectAllData', 'sortChange'])
defineProps({
  // 动态展开行必须设置刷新
  refreshTable: {
    type: Boolean,
    default: () => true
  },
  // 合并列或行
  arraySpanMethod: {
    type: Function,
    default: () => {}
  },
  // 选中单行数据
  selectRow: {
    type: Function,
    default: () => {}
  },
  // 表头数据
  rowHeader: {
    type: Array,
    default: () => {
      return []
    }
  },
  // 表格数据
  tableData: {
    type: Array,
    default: () => []
  },
  // 是否需要边框
  hasBorder: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  // 是否需要全选框
  hasSelectAll: {
    type: Boolean,
    default: () => false
  },
  // 是否需要选中记忆
  hasReserve: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  // 是否需要序号标题
  hasIndex: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  // 序号标题
  indexLabel: {
    type: String,
    default: '序号'
  },
  // 是否需要控制需要（尾部）操作的产生
  hasOption: {
    type: Boolean,
    default: () => false
  },
  // 查看编辑选项
  addBtnList: {
    type: Object,
    default: () => {
      return { list: [] }
    }
  },
  // 是否需要控制分页的产生
  hasPagination: {
    type: Boolean,
    default: () => false
  },
  // 设置当前页数
  pageNum: {
    type: Number,
    default: () => {
      return 1
    }
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 50, 100, 200]
  },
  // 设置每页条数
  pageSize: {
    type: Number,
    default: () => {
      return 10
    }
  },
  pageLayout: {
    type: String,
    default: 'total, sizes, next, pager, prev, jumper'
  },
  // 设置数据总长度
  putTotal: {
    type: Number,
    default: () => {
      return 0
    }
  },
  // pageSize 改变时会触发 每页条数
  handleSizeChange: {
    type: Function,
    default: () => {}
  },
  // currentPage 改变时会触发 当前页
  handleNumChange: {
    type: Function,
    default: () => {}
  },
  // 加载loading
  loading: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  // 是否展开行
  expandAll: {
    type: Boolean,
    default: () => false
  }
})
const getRowKeys = (row:any) => row.id
// 按钮触发回调
const clkCall = (methodsWords:string, scope:any) => {
  $emit('operaBtnClick', methodsWords, scope)
}
// 获取全选后的数据
const handleSelectAll = (selection:Array<any>) => {
  $emit('selectAllData', selection)
}

// 触发自定义排序
const changeTableSort = (column:any) => {
  $emit('sortChange', column)
}
</script>
